<template>
  <div id="give_out" :class="{'w375': fun.isPc()}">
    <c-title :hide="false" :text="'优惠券发放'"></c-title>
    <div class="content">
      <div class="coupon_open">
        <ul class="list">
          <li>
            <span>发放张数</span>
            <input type="text" placeholder="请输入数字，不小于1" v-model="Num">
          </li>
          <li>
            <span>发放对象</span>
            <van-radio-group v-model="result" checked-color="#f15353">
              <van-radio :name=1>按照会员ID发送</van-radio>
            </van-radio-group>
          </li>
          <li>
            <span>会员ID</span>
          </li>
          <textarea placeholder="请用“半角隔号”隔开会员ID，比如1，2，3，注意不能有空格" v-model="Text"></textarea>
        </ul>
      </div>

    </div>
    <div class="bottom" >
      <button class="give_btn" type="button" @click="publish()">确认发放</button>
    </div>
  </div>
</template>

<script>
import give_out_controller from "./give_out_controller";

export default give_out_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.w375{
  width: 375px;
}
#give_out {
  position: relative;
  min-height: 100vh;
  input{
    text-align: right;
    font-size: 0.875rem;
  }
  input::-webkit-input-placeholder{
    color: #AAAAB3;
  }
  span{
    font-size: 1rem;
    font-weight: 400;
    color: #00001C;
  }
  .content {
    margin: 0.75rem;
    border-radius: 0.625rem;
    background: #fff;
    overflow: hidden;

    .coupon_open {
      padding: 1.25rem 0;

      .van-radio-group {
        display: flex;
        align-items: center;
      }

      .list {
        padding: 0 0.75rem;
        li:last-child{
          margin-bottom: 0.625rem;
        }

        li {
          display: flex;
          justify-content: space-between;
          line-height: 1rem;
          height: 1rem;
          font-size: 15px;
          margin-bottom: 1.25rem;

          span {
            width: 6.25rem;
            text-align: left;
          }

          input {
            border: none;
            width: 15rem;
          }


        }
      }
    }


  }
  textarea {
    width: 100%;
    min-height: 4.375rem;
    border-radius:0.3125rem;
    border:none;
    background: #F5F5F5;
    font-size: 0.875rem;
    padding: 0.375rem;
  }
}

.bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.0625rem;
  padding: 0.2813rem 0.75rem;
  background-color: #fff;
}

.give_btn {
  width: 100%;
  border-radius: 1.2813rem;
  height: 2.5rem;
  line-height: 2.5rem;
  background: #F15353;
  color: #fff;
  font-size: 0.9375rem;
  border: none;
  text-align: center;
}
</style>
